<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main style="overflow-y: hidden">
        <!-- 问卷主体区域 -->
        <el-card class="main-area">
          <el-progress
            :percentage="saveData.percentage"
            :show-text="false"
          ></el-progress>
          <!-- 问卷内容部分 -->
          <div class="content-area">
            <div class="name">
              <span>{{ questionnaire.title }}</span>
            </div>
            <div class="description">
              <span>{{ questionnaire.desc }}</span>
            </div>
            <!-- 问卷问题 -->
            <div
              class="question-area"
              v-for="(question, index) in questionnaire.questions"
              :key="index"
            >
              <single-preview
                v-if="question.type === 'single'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
              ></single-preview>
              <multi-preview
                v-if="question.type === 'multi'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
              ></multi-preview>
              <fill-preview
                v-if="question.type === 'text'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
              ></fill-preview>
              <grade-preview
                v-if="question.type === 'grade'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
              ></grade-preview>
            </div>
            <!-- 提交按钮 -->
            <div class="commit">
              <el-button type="primary" class="commit-button" @click="print"
                >提交</el-button
              >
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import FillPreview from "../components/Preview/FillPreview.vue";
  import GradePreview from "../components/Preview/GradePreview.vue";
  import MultiPreview from "../components/Preview/MultiPreview.vue";
  import SinglePreview from "../components/Preview/SinglePreview.vue";
  export default {
    components: { SinglePreview, MultiPreview, FillPreview, GradePreview },
    data() {
      return {
        questionnaire: {
          title: "问卷标题",
          desc: "为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧！",
          questions: [
            {
              id: 123,
              title: "开玩笑嘛？",
              type: "text",
              must: "true",
              row: 1,
            },
            {
              id: 122,
              title: "你给我的颜值打几分？",
              type: "grade",
              must: "true",
              detail: {
                range: 5,
                start: 1,
                degree_min: "颜值低",
                degree_max: "颜值高",
                // choice: 4,
                grade_type: "nmd",
              },
            },
            {
              id: 11,
              title: "垂死病中惊坐起，____________",
              type: "multi",
              must: "true",
              options: [
                {
                  title: "你好",
                  id: 12,
                },
                {
                  title: "我不好",
                  id: 56,
                },
              ],
            },
            {
              id: 11,
              title: "垂死病中惊坐起，____________",
              type: "single",
              must: "true",
              options: [
                {
                  title: "你好",
                  id: 12,
                },
                {
                  title: "我不好",
                  id: 56,
                },
              ],
            },
            {
              id: 123,
              title: "开玩笑嘛？",
              type: "text",
              must: "true",
              row: 2,
            },
          ],
        },
        saveData: {
          percentage: 50,
        },
        // answer
      };
    },
    methods: {
      print() {
        console.log(this.questionList);
      },
      // 当子组件改变已填写的答案时调用
      // 实时增删改问题列表中的答案
      // index: 题号
      // answer: 新的答案
      changeAnswers(index, answer) {
        if (typeof answer === "object") {
          this.questionnaire.questions[index - 1]["answer"] = [];
          for (var i = 0; i < answer.length; i++) {
            this.questionnaire.questions[index - 1]["answer"].push({
              option_id: answer[i],
            });
          }
        } else if (typeof answer === "number") {
          this.questionnaire.questions[index - 1]["grade"] = answer;
        } else {
          this.questionnaire.questions[index - 1]["text"] = answer;
        }
      },
    },
  };
</script>

<style scoped>
.el-header {
  --el-header-padding: 0;
}

.el-main {
  --el-main-padding: 160px 220px 160px 220px;
  height: 100%;
}

.main-area {
  height: 100%;
}

.name1 {
  display: flex;
  justify-content: center;
  font-family: "微软雅黑";
  font-size: 30px;
}

.description {
  margin-top: 40px;
  font-size: 16px;
}

.content-area {
  margin: 40px;
  font-family: "微软雅黑";
}

.commit {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.commit-button {
  width: 220px;
  height: 40px;
}

.question-area {
  margin-top: 45px;
}
</style>